<template>
  <div class="edit">
    <el-breadcrumb
      separator-class="el-icon-arrow-right"
      style="margin-bottom: 20px"
    >
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/menu' }">菜单管理</el-breadcrumb-item>
      <el-breadcrumb-item>菜单{{type}}</el-breadcrumb-item>
    </el-breadcrumb>

    <!--添加修改表单-->
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="菜单名称" prop="title">
        <el-input v-model="form.title" style="width: 400px"></el-input>
      </el-form-item>
      <el-form-item label="上级菜单" prop="pid">
        <el-select v-model="form.pid" placeholder="请选择上级菜单">
          <el-option label="顶级菜单" :value="0"></el-option>
          <el-option
            v-for="item in menuList"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="菜单类型">
        <el-radio-group v-model="form.type">
          <el-radio label="1">目录</el-radio>
          <el-radio label="2">菜单</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="目录图标" v-if="form.type == 1">
        <el-input v-model="form.icon" style="width: 400px"></el-input>
      </el-form-item>

      <el-form-item label="菜单地址" v-if="form.type == 2">
        <el-input v-model="form.url" style="width: 400px"></el-input>
      </el-form-item>

      <el-form-item label="状态">
        <el-switch
          v-model="form.status"
          :active-value="1"
          inactive-value="0"
          active-color="green"
          inactive-color="red"
        ></el-switch>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: "edit",
  data() {
    return {
      type: '添加',
      form: {
        pid: "", // 上级分类编号
        title: "", // 标题
        icon: "", // 图标
        type: "", // 类型 1目录 2菜单
        url: "", // 菜单地址
        status: "", // 状态 1正常 2禁用
      },
      rules: {
        title: [
          { required: true, message: "菜单名称不能为空", trigger: "blur" },
          { min: 3, max: 8, message: "请输入3-8位的菜单名称", trigger: "blur" },
        ],
        pid: [{ required: true, message: "请选择上级菜单", trigger: "blur" }],
      },
      //menuList: [],
    };
  },
  computed: {
    ...mapState(['menuList'])
  },
  mounted() {
    //this.getMenuList();
    let id = this.$route.params.id;
    if(id){
      this.type = '编辑'
      this.getMenuInfo(id)
    }
  },
  methods: {
    /*getMenuList() {
      this.$axios
        .get("/api/menulist", { params: { istree: 1 } })
        .then((result) => {
          console.log(result);
          this.menuList = result.data.list;
        })
        .catch((err) => {
          console.log(err);
        });
    },*/

    // 获得form表单，然后进行验证
    onSubmit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          // 深拷贝
          let str = JSON.stringify(this.form);
          let data = JSON.parse(str);
          let url = "/api/menuadd";
          if(this.type === '编辑'){
            url = '/api/menuedit'
            data.id = this.$route.params.id
          }
          this.$axios
            .post(url, data)
            .then((result) => {
              console.log(result);
              if (result.data.code === 200) {
                this.$router.push("/menu");
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // 获取要编辑项的数据（一条）
    getMenuInfo(id){
      this.$axios.get('/api/menuinfo', {params:{id}})
      .then((result)=>{
        this.form = result.data.list
      })
      .catch((err)=>{
        console.log(err)
      })
    },
  },
};
</script>

<style>
</style>